<template>
    <div style="padding: 0px 0 0 0;">

        <a-form :labelCol="{ style: { width: '100px' }, }" class="form-p">
            <a-row :gutter="[24, 0]">
                

                <a-col :span="8">
                    <a-form-item label="订单编号">
                        <a-input v-model:value.trim="formState.no" placeholder="请输入订单编号" allowClear />
                    </a-form-item>
                </a-col>
                <a-col :span="8">
                    <a-form-item label="商品名称">
                        <a-input v-model:value.trim="formState.goodsName" placeholder="请输入商品名称" allowClear />
                    </a-form-item>
                </a-col>
                <a-col :span="8">
                    <a-form-item label="供应商名称">
                        <a-input v-model:value.trim="formState.companyName" placeholder="请输入供应商名称" allowClear />
                    </a-form-item>
                </a-col>
                <a-col :span="8">
                    <a-form-item label="项目名称">
                        <a-input v-model:value.trim="formState.projectName" placeholder="请输入项目名称" allowClear />
                    </a-form-item>
                </a-col>
                <a-col :span="8">
                    <a-form-item label="建立时间">
                        <startEndDateTime v-model:startDate="formState.startDate" v-model:endDate="formState.endDate"
                            style="width:100%;">
                        </startEndDateTime>
                    </a-form-item>
                </a-col>

                <a-col :span="8">
                    <a-form-item >
                        <a-space>
                            <a-button type="primary" @click="getList(1)">查询</a-button>
                            <a-button @click="formState = {}" type="primary">重置</a-button>

                        </a-space>
                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>

        <a-card>
            <div style="padding: 0 0 20px 0;">
                <a-button @click="toAdd" type="primary">新增</a-button>
            </div>
            <my-table :dataSource="dataSource" :columns="columns" rowKey="id" bordered size="small" style=""
                :loading="loading" :scroll="{ x: 1000 }" :pagination="{
                    current: pageNum,
                    pageSize: pageSize,
                    total: totalCount,

                }" @change="tableChange">
                <template #bodyCell="{ index, column, record }">
                    <template v-if="column.dataIndex == 'index'">
                        {{ (pageNum - 1) * pageSize + index + 1 }}
                    </template>
                    <template v-if="column.dataIndex == 'remark'">
                        <div v-for="item in formatStr(record.remark)">{{ item }}</div>
                    </template>
                    <template v-if="column.dataIndex == 'companyName'">
                        <div v-for="item in formatStr(record.companyName)">{{ item }}</div>
                    </template>
                
                    <template v-if="column.dataIndex == 'amount'">
                        {{ record.amount / 100 }} 元
                    </template>
                     

                    <template v-if="column.key === 'action'">

                        <a-button @click="toDetail(record)" type="link">查看</a-button>
                        <a-button @click="toUpdate(record)" type="link">编辑</a-button>

                        <a-popconfirm title="确定删除？" ok-text="确定" cancel-text="取消" @confirm="remove(record)">
                            <a-button type="link">删除</a-button>
                        </a-popconfirm>

                    </template>
                </template>
            </my-table>
        </a-card>

    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onActivated } from 'vue';

import startEndDateTime from '@/components/startEndDateTime.vue';
import { getOrderList, deleteOrder } from '@/api/orderApi'

import { useRouter } from "vue-router"
import type { Order } from '@/types/Order'
import { useOrderStore } from '@/stores/order'
import { message } from 'ant-design-vue'

import AreaInput from '@/components/areaInput.vue';
import type { OrderListRes } from '@/types/OrderListRes';

const router = useRouter()
const orderStore = useOrderStore()

const lookVisible = ref(false)
const lookData = ref<OrderListRes>({})
const loading = ref(false);
const pageNum = ref(1);
const pageSize = ref(10);
const totalCount = ref(0);
const dataSource = ref<OrderListRes[]>([]);
const columns = ref([
    { title: '序号', dataIndex: 'index', align: 'center', width: 70 },
    { title: '订单编号', dataIndex: 'no', align: 'center' ,width: 200},
    { title: '商品', dataIndex: 'remark', align: 'center' },
   
    { title: '金额', dataIndex: 'amount', align: 'center' },
    { title: '供应商', dataIndex: 'companyName', align: 'center' },
    { title: '项目', dataIndex: 'projectName', align: 'center' },
    { title: '创建时间', dataIndex: 'createTime', align: 'center' },
    { title: '操作', key: 'action', align: 'center', fixed: 'right', width: 350 },
]);

const formState = ref<any>({})


const getList = async (num: number) => {
    pageNum.value = num;

    let params = {
        pageNum: pageNum.value,
        pageSize: pageSize.value,
        ...formState.value
    };

    loading.value = true;
    try {
        let res = await getOrderList(params);
        dataSource.value = res.data.records;
        totalCount.value = res.data.total;
    } catch (error) {

    }
    loading.value = false;
};

const toAdd = () => {
    router.push({
        path: '/order/addOrder'
    })
}

const remove = async (record: OrderListRes) => {


    await deleteOrder(record.id as number)
    getList(pageNum.value)
    message.success('删除成功')

}

const toUpdate = (record: OrderListRes) => {
    orderStore.updateOrder = JSON.parse(JSON.stringify(record))
    router.push({
        path: '/order/updateOrder'
    })
}


const toDetail = (record: OrderListRes) => {
    orderStore.updateOrder = record
    router.push({
        path: '/order/lookOrder'
    })
}


const tableChange = (e: any) => {
    pageSize.value = e.pageSize
    getList(e.current)
};

onActivated(() => {
    if (orderStore.reloadList) {
        orderStore.reloadList = false
        getList(pageNum.value);
    }
})

const formatStr = (str: string) => {
    if(! str){
        return []
    }
    return str.split(',')
}

onMounted(async () => {
    getList(1);
});
</script>

<style scoped></style>